<script type="text/javascript" src="<?php echo STATIC_DOMAIN;?>js/highcharts/js/highcharts.src.js"></script>
<style>
.ui-widget {font-family:Arial}
.ui-widget-content{border:none}
.ui-widget-header{background: none;border:none; border-bottom:1px solid #ddd}
.sumaryItem{font:normal 12px arial; line-height:22px;}
.sumaryItem span{font-weight:bold;color:#f00;}
.fieldset{border:1px solid #eee; padding:15px;}
.fieldset legend{font-weight:bold; color:#333}
.fieldset .infoNote{float:left; width:240px;}
.fieldset .diagram{float:right; width:650px;}
.chart{width:900px; margin:0 auto}
.clear20{clear:both; height:20px}
.clear10{clear:both; height:10px}
.middle{width: 980px; margin: 0 auto;}
</style>
<div class="middle myclear">
	<div class="pad10">	
		<h2 class="marbottom10 martop20">
			Report
		</h2>
	</div> 
    <div id="tab">
        <div id="settingmail">
        	<div class="dashboard-box myclear">
                <table class="mbd-timebox martop20" cellpadding="0" cellspacing="0" border="0">	
                    <tr>
                        <td class="padright10 ver-middle">
                            <input class="input-time" type="text" readonly="readonly" id="date" value="<?php echo date('d/m/Y',strtotime($fromdate))?> đến <?php echo date('d/m/Y',strtotime($todate))?>" />
                        </td>
                        <td class="padright10 ver-middle">
							<select class="payment-by-month" id="group" onchange="change_group(this.value);">
                                <?php foreach($lstagency as $ag){ ?>
                                <option value="<?php echo $ag['groupid']?>" <?php echo $lstgroupid==$ag['groupid'] ? 'selected="selected"':'' ?>><?php echo $ag['groupname']?></option>
                                <?php }?>
							</select>
						</td>
                    </tr>
                </table>
            </div>   
        </div>
        <?php if(count($data)>0){ ?>
            <table class="tbl-list" width="100%" cellpadding="0" cellspacing="0">
                <tr >
                    <th class="td-label bold text-center ver-middle">Ngày</th>
                    <th class="td-label bold text-center ver-middle">Click</th>
                    <th class="td-label bold text-center ver-middle">Real Click</th>
                    <th class="td-label bold text-center ver-middle">Click Charge</th>
                    <th class="td-label bold text-center ver-middle">(%)Charge/Real</th>
                    <th class="td-label bold text-center ver-middle">View</th>
                    <th class="td-label bold text-center ver-middle">CTR</th>
                </tr>
                <?php foreach($data as $dt){?>
                <tr>
                    <td class="ver-middle pad10 text-center"><?php echo date('d/m/Y',strtotime($dt['dt']));?></td>
                    <td class="ver-middle pad10 text-right"><?php echo number_format($dt['click']);?></td>
                    <td class="ver-middle pad10 text-right"><?php echo number_format($dt['realclick']);?></td>
                    <td class="ver-middle pad10 text-right"><?php echo number_format($dt['clickcharge']);?></td>
                    <td class="ver-middle pad10 text-right"><?php echo $dt['realclick'] == 0 ? 0.00 : number_format(($dt['clickcharge']/$dt['realclick'])*100, 2);?></td>
                    <td class="ver-middle pad10 text-right"><?php echo number_format($dt['view']);?></td>
                    <td class="ver-middle pad10 text-right"><?php echo $dt['ctr'];?></td>
                </tr>
                <?php }?>
            </table>
            <div id="container" style="width: 980px; height: 450px;margin-bottom: 60px;" class="padtop20"></div>
            <div id="container2" style="width: 980px; height: 450px;margin-bottom: 100px;"></div>
        <?php }else{?>
            <h2>Không có dữ liệu của nhóm được chọn</h2>
        <?php }?>
    </div>
</div>
<p class="text-right pad10">
    <img id="top" class="cursor-pointer" alt="" src="images/backtotop.gif" onclick="window.scrollTo(0,0); return false;"/>
</p>
<script type="text/javascript">
$('#date').DatePicker(
{
    format: 'd/m/Y',
    date: ['<?php echo date('d/m/Y',strtotime($fromdate));?>','<?php echo date('d/m/Y',strtotime($todate));?>'],
    current: '<?php echo date('d/m/Y');?>',
    calendars: 2,
    mode: 'range',
    starts: 1,
    locate:'week',
    onChange: function(formated, dates) 
    {
        $('#date').val(formated.join(' đến '));
        $('#date').DatePickerHide();
        var group = $('#group').val();
        var arrTime = formated.toString().split(',');
        var fromdate = arrTime[0];
        var todate = arrTime[1];
        fromdate=fromdate.split('/');
        fromdate=fromdate[2]+'-'+fromdate[1]+'-'+fromdate[0];
        todate=todate.split('/');
        todate=todate[2]+'-'+todate[1]+'-'+todate[0];
        var url='<?php echo site_url('report/groupreport?id=');?>'+group+'&fromdate='+fromdate+'&todate='+todate;
        window.location = url;
    }
});
function change_group(id)
{
    var arrTime = $('#date').val().toString().split(' đến ');
    var fromdate = arrTime[0];
    var todate = arrTime[1];
    fromdate=fromdate.split('/');
    fromdate=fromdate[2]+'-'+fromdate[1]+'-'+fromdate[0];
    todate=todate.split('/');
    todate=todate[2]+'-'+todate[1]+'-'+todate[0];
    var url='<?php echo site_url('report/groupreport?id=');?>'+id+'&fromdate='+fromdate+'&todate='+todate;
    window.location = url;
}
<?php if(count($data)>0){?>
$(document).ready(function() 
{
    chart = new Highcharts.Chart(
    {
		chart: 
        {
			renderTo: 'container',
			defaultSeriesType: 'areaspline',
            marginBottom: 60,
			zoomType: 'x'
		},
		title: 
        {
			text: 'Click',
			style: 
            {
					font: 'normal 18px arial, sans-serif',
					color:'#0a708c'
			}
		},
        xAxis: 
        {
            categories: <?php echo $date;?>,
            maxZoom: 5,
            labels: 
            {
            //  step:  <?php  echo isset($step) ? $step : 1;?>,
        	rotation: 0,
        	align: 'center'
        },
        tickPixelInterval:0,
        tickmarkPlacement: 'on',
        tickInterval: <?php  echo isset($step) ? $step : 1;?>,
        lineColor: '#333',
        lineWidth: 1	
        },
        yAxis: 
        {
            title:
            {
                text: 'Số lượng',
                style: 
                {
            		font: 'bold 14px vernada, sans-serif',
            		color:'#0a708c'
                }
            }
        },
		tooltip:
        {
			formatter: function() 
            {
				var a=function addCommas(nStr)
				{
					nStr += '';
					x = nStr.split('.');
					x1 = x[0];
					x2 = x.length > 1 ? '.' + x[1] : '';
					var rgx = /(\d+)(\d{3})/;
					while (rgx.test(x1)) {
						x1 = x1.replace(rgx, '$1' + ',' + '$2');
					}
					return x1 + x2;
				}
                return ''+ this.x +': <b>'+ a(this.y) +'</b>';
			},
			style: 
            {
				font: 'normal 12px vernada, sans-serif',
				color:'#000000'
			},
            crosshairs: true
		},
		credits: {
			enabled: false
		},
		plotOptions: 
        {
			areaspline: 
            {
				fillOpacity: 0.2,
				lineWidth: 2,
				states: 
                {
				   hover: 
                   {
					  lineWidth: 3
				   }
				},
				marker: 
                {
				   enabled: true,
				   states: 
                   {
					  hover: 
                      {
						 enabled: true,
						 symbol: 'circle',
						 radius: 4,
						 lineWidth: 1
					  },
					  radius: 4
				   }   
				}
			 }	
		},
		rangeSelector: 
        {
			selected: 1,
			inputEnabled: false
		},
		navigator: 
        {
			height: 30
		},
        legend: 
        {
			align: 'center',
			verticalAlign: 'bottom',
			y: 8,
			x:10,
			floating: false,
			borderWidth: 1,
			backgroundColor: '#FFFFFF'
		},
		series: [<?php echo $data1;?>],
        exporting: 
        {
            enabled: false
        }	
   });
   
   chart2 = new Highcharts.Chart(
   {
		chart: 
        {
			renderTo: 'container2',
			defaultSeriesType: 'areaspline',
            marginBottom: 60,
			zoomType: 'x'
		},
		title: 
        {
			text: 'View',
			style: 
            {
					font: 'normal 18px arial, sans-serif',
					color:'#0a708c'
			}
		},
        xAxis: 
        {
            categories: <?php echo $date;?>,
            maxZoom: 5,
            labels: 
            {
            //  step:  <?php  echo isset($step) ? $step : 1;?>,
        	rotation: 0,
        	align: 'center'
        },
        tickPixelInterval:0,
        tickmarkPlacement: 'on',
        tickInterval: <?php  echo isset($step) ? $step : 1;?>,
        lineColor: '#333',
        lineWidth: 1	
        },
        yAxis: 
        {
            title:
            {
                text: 'Số lượng',
                style: 
                {
            		font: 'bold 14px vernada, sans-serif',
            		color:'#0a708c'
                }
            }
        },
		tooltip:
        {
			formatter: function() 
            {
				var a=function addCommas(nStr)
				{
					nStr += '';
					x = nStr.split('.');
					x1 = x[0];
					x2 = x.length > 1 ? '.' + x[1] : '';
					var rgx = /(\d+)(\d{3})/;
					while (rgx.test(x1)) {
						x1 = x1.replace(rgx, '$1' + ',' + '$2');
					}
					return x1 + x2;
				}
                return ''+ this.x +': <b>'+ a(this.y) +'</b>';
			},
			style: 
            {
				font: 'normal 12px vernada, sans-serif',
				color:'#000000'
			},
            crosshairs: true
		},
		credits: {
			enabled: false
		},
		plotOptions: 
        {
			areaspline: 
            {
				fillOpacity: 0.2,
				lineWidth: 2,
				states: 
                {
				   hover: 
                   {
					  lineWidth: 3
				   }
				},
				marker: 
                {
				   enabled: true,
				   states: 
                   {
					  hover: 
                      {
						 enabled: true,
						 symbol: 'circle',
						 radius: 4,
						 lineWidth: 1
					  },
					  radius: 4
				   }   
				}
			 }	
		},
		rangeSelector: 
        {
			selected: 1,
			inputEnabled: false
		},
		navigator: 
        {
			height: 30
		},
        legend: 
        {
			align: 'center',
			verticalAlign: 'bottom',
			y: 8,
			x:10,
			floating: false,
			borderWidth: 1,
			backgroundColor: '#FFFFFF'
		},
		series: [<?php echo $data2;?>],
        exporting: 
        {
            enabled: false
        }	
   });
	   
});
<?php }?>
</script>
